<!-- 右侧列表 -->
<template>
  <div class="list">
      <div class="my-crumb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item 
            :to="{ path:this.$store.state.onelink}"
            >
            {{this.$store.state.onetitle}}
            </el-breadcrumb-item>
            <el-breadcrumb-item>{{this.$store.state.title}}</el-breadcrumb-item>
          </el-breadcrumb>
      </div>
      <div>
          <ul>
              <li v-for="item in this.$store.state.data.data" :key="item.id" @click="openView(item.Guid)">
                  <el-row>
                      <el-col :span=7>
                        <div class="image">
                            <img :src="item.Content|fnDataimage" alt="">
                        </div>
                      </el-col>
                      <el-col :span=17>
                        <div class="data">
                            <p class="p-title">{{item.Title}}</p>
                            <p class="p-content">{{item.Content|fnData}}</p>
                        </div>
                        <div class="time">
                            <span>{{item.AddTime|fnDatetime}}</span>
                        </div>
                      </el-col>
                  </el-row>
                  
              </li>

          </ul>
      </div>
      <div class="page-Pagination">
          <el-pagination
            background
            layout="total,prev, pager, next"
            @current-change="currentChange"
            :page-size="size"
            :total="this.$store.state.data.count">
          </el-pagination>
      </div>
  </div>
</template>

<script>
import { ArticleList } from "@/api/data";
import { fnhtmlString, fnextractDataImage,fninterceptString ,fnDatetime} from "@/unit/index";

import store from "@/store/modules/webnav/index";
import travelsketchVue from '../../page/travelsketch.vue';

export default {
  data() {
    return {
      size: 5 //每页条数
    };
  },
  store,
  /**ajax数据初始化钩子 */
  mounted() {
    
  },
  /**过滤器 */
  filters: {
    fnDataimage(data) {
      let imagelist = fnextractDataImage(data);
      
      if (imagelist.length > 0) {
        return imagelist[0];
      } else {
        return "";
      }
    },
    fnData(data) {
      let res=fnhtmlString(data);
      return fninterceptString(res,100);
    },
    fnDatetime(time){
      let obj=fnDatetime(time);
      return obj.year+'年'+obj.month+'月'+obj.day+'日';
    }
  },
  methods: {
    //当前页
    async currentChange(val) {
      let type = this.$store.state.type;
      let json = new Object();
      json.page = val;
      json.limit = this.size;
      const res = await ArticleList(json, type);
      if (res.code == 0) {
        this.$store.commit("toRightDataBind", res);
      }
    },
    //显示查看页面
    openView(id){
      let json=new Object();
      json.Guid=id;
      json.islist=false;
      this.$store.commit("toRightContent",json);

      this.$store.dispatch('actionDataBind')

    }
  },
  /** 组件注册 */
  components: {}
};
</script>
<style scoped>
ul {
  margin: 0;
  padding: 0 0 10px 0;
}
li {
  margin: 0 20px 10px 30px;
  list-style: none;
  padding-bottom: 20px;
  border-bottom: 1px solid #d2d2d2;
  cursor: pointer;
}
li:hover {
  background-color: #d2d2d2;
}
.image {
  margin: 20px 0;
}
.image img {
  width: 200px;
  height: auto;
}
.my-crumb {
  padding: 25px 20px;
}
.p-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #444;
}
.p-content {
  color: #888;
  font-size: 14px;
  text-indent: 28px;
}
.time span {
  color: #888;
  font-size: 14px;
}
.page-Pagination {
  text-align: center;
  padding-bottom: 20px;
}
</style>